<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script>
<script src="../javascript/jquery.formcheck.js" language="javascript"></script>
<script src="../javascript/locale/jquery.formcheck-it.js" language="javascript"></script>
<link href="../css/formcheck.css" rel="stylesheet" type="text/css">
<link href="css/examplepage.css" rel="stylesheet" type="text/css">
<script src="js/examplepage.js" language="javascript"></script>
<title>Insert title here</title>
</head>
<body>
<div id="container">
	<h1>jQuery form check plugin</h1>
	<a href="code.google.com/p/jquery-formcheck/" title="Project home page">jQuery formcheck</a> is a small plugin for validating form data. Try to write "wrong" data in the following fields to see what happens.<br>
	Altough this plugin has been used in some production sites it has not been widely tested. Please report any issue you will find to <a href="code.google.com/p/jquery-formcheck/issues/list" title="issue tracking">this address</a><br><br>
	If you use this plugin and find it useful, or for suggestions and critics please leave a post <a href="http://giacomo.mirabassi.it/2010/09/jquery-formcheck-plugin/" title="Blog post">here</a>.
	<div class="example">
		<h2>Basic validation</h2>
		<h4>Code:</h4>
		<pre>
$("#example1").formCheck({
	fields:{
		name:{empty:true,alpha:true,selector:'#example1 input[name="nick"]'},
		email:{empty:true,email:true,selector:'#example1 input[name="email"]'},
		tel:{empty:true,numeric:true,selector:'#example1 input[name="tel"]'}
	},lang:'en'
});
		</pre>
		<form id="example1" action="">
			<span>Name: (non empty, letters only)</span> <input type="text" name="nick"/><br>
			<span>email: (non empty, email)</span> <input type="text" name="email"><br>
			<span>tel: (non empty, numbers only)</span> <input type="text" name="tel"><br>
			<input type="submit" value="controlla">
		</form>
	</div>
	<div class="example">
		<h2>Simple language support</h2>
		<h5>Italian</h5>
		<h4>Code:</h4>
		<pre>
$("#example_it").formCheck({
	fields:{
		nickname:{empty:true,alpha:true,selector:'#example_it input[name="nick"]'},
		email:{empty:true,email:true,selector:'#example_it input[name="email"]'}
	},lang:'it'
});
		</pre>		
		<form id="example_it" action="">
			<span>Nickname: (non empty, letters and/or numbers)</span> <input type="text" name="nick"/><br>
			<span>email: (non empty, email)</span> <input type="text" name="email"><br>
			<input type="submit" value="controlla">
		</form>
		<h5>English</h5>
		<h4>Code:</h4>
		<pre>
$("#example_en").formCheck({
	fields:{
		nickname:{empty:true,alpha:true,selector:'#example_it input[name="nick"]'},
		email:{empty:true,email:true,selector:'#example_it input[name="email"]'}
	},lang:'en'
});
		</pre>		
		<form id="example_en" action="">
			<span>Nickname: (non empty, letters and/or numbers)</span> <input type="text" name="nick"/><br>
			<span>email: (non empty, email)</span> <input type="text" name="email"><br>
			<input type="submit" value="controlla">
		</form>
	</div>
	<div class="example">
		<h2>Advanced multi language</h2>
		This is a bit weird but will change in future versions
		<h4>Code:</h4>
		<pre>
var lang='it';
var fields={name:{empty:true,alpha:true,selector:'#example2 input[name="nick"]'},
			email:{empty:true,email:true,selector:'#example2 input[name="email"]'}};
$("#example2").formCheck({fields:fields,lang:lang});
$("#langsel").change(function(){
	lang=$(this).val();
	$("#example2").formCheck({fields:fields,lang:lang});
});
		</pre>
		<span>Select Language:</span>
		<select name="lang" id="langsel">
			<option value="it">Italian</option>
			<option value="en">English</option>
		</select>
		<form id="example3" action="">
			<span>name: (non empty, letters and/or numbers)</span> <input type="text" name="nick"/><br>
			<span>email: (non empty, email)</span> <input type="text" name="email"><br>
			<input type="submit" value="controlla">
		</form>
	</div>
</div>
</body>
</html>